/**
 * 消息列表组件
 */

import React, { useEffect, useRef } from 'react';
import { Message } from '../types';
import ChatMessage from './ChatMessage';
import WelcomeMessage from './WelcomeMessage';

interface MessageListProps {
  messages: Message[];
  onSelectDesign?: (design: any) => void;
}

const MessageList: React.FC<MessageListProps> = ({ messages, onSelectDesign }) => {
  const messagesEndRef = useRef<HTMLDivElement>(null);

  // 自动滚动到底部
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  return (
    <div
      style={{
        flex: 1,
        padding: '20px',
        overflowY: 'auto',
        backgroundColor: '#f5f7fa',
      }}
    >
      {/* 如果没有消息，显示欢迎消息 */}
      {messages.length === 0 && <WelcomeMessage />}

      {/* 消息列表 */}
      {messages.map((message) => (
        <ChatMessage
          key={message.id}
          message={message}
          onSelectDesign={onSelectDesign}
        />
      ))}

      {/* 用于滚动到底部的锚点 */}
      <div ref={messagesEndRef} />
    </div>
  );
};

export default MessageList;
